<template>
    <div class="div">
        <div class="text-xl font-bold mb-16px">
            会员卡信息设置
        </div>
        <div class="px-16px">
            <formComponent ref="formRef" v-model:value="formValue" :form-data="formData"/>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch, shallowRef } from 'vue'
import formComponent from '@/components/form-component/index.vue'
import type { AnyObject } from '@/api/type'
import type { FormDataDto } from '@/components/form-component/type'
import { createFormValue } from '@/utils/utils'

const formRef = ref()

const formData = ref<FormDataDto>({
    list: {
        name: {
            label: '会员卡名称',
            prop: 'name',
            type: 'input',
            required: true,
            extra: {
                maxlength: 5,
                showWordLimit: true
            }
        },
        upDate: {
            label: '上架时间',
            prop: 'releaseTime',
            type: 'date',
            dateType: 'datetime',
            required: true,
            extra: {
                class: 'width-full',
                format: 'YYYY-MM-DD HH:mm',
                valueFormat: 'YYYY-MM-DD HH:mm'
            }
        },
        price: {
            label: '会员卡价格',
            prop: 'price',
            type: 'input',
            inputType: 'number',
            required: true,
            extra: {
                suffix: '元'
            }
        },
        validDate: {
            label: '会员有效期',
            prop: 'validityMonth',
            type: 'input',
            inputType: 'number',
            required: true,
            extra: {
                suffix: '个月'
            }
        },
        introduce: {
            label: '权益介绍',
            prop: 'introduce',
            type: 'textarea',
            required: true,
            placeholder: '用‘#’键隔开',
            extra: {
                maxlength: 80,
                showWordLimit: true,
            },
            callbacks: {
                handleInput: () => {
                    // console.log(111, val)
                }
            }
        },
        showPrice: {
            label: '划线价格',
            prop: 'originalPrice',
            type: 'input',
            inputType: 'number',
            required: false,
            extra: {
                min: 0
            }
        },
    }
})

const formValue = ref<AnyObject>(createFormValue(formData.value))

const emits = defineEmits(['valueChanged'])

const submit = async () => {
    await formRef.value.handleValidate()
    return formValue.value
    // return formRef.value.getFormValue()
}

watch(formValue, (newval) => {
    emits('valueChanged', newval)
}, {
    deep: true
})

defineExpose({
    submit
})

</script>
<style lang="scss" scoped></style>
